<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美金充值</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/CSS.css">
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../layui/layui.all.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/JS.js"></script>
</head>
<body style="background: #fff">
<header>
    <a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
    <div class="center title">美金充值</div>
</header>
<form action="">
<ul class="recharge clearfix">
    <li class="active">
        <p>500美金</p>
        <p>送50美金</p>
    </li>
    <li>
        <p>1000美金</p>
        <p>送100美金</p>
    </li>
    <li>
        <p>2000美金</p>
        <p>送200美金</p>
    </li>
    <li>
        <p>3000美金</p>
        <p>送300美金</p>
    </li>
    <li>
        <p>5000美金</p>
        <p>送500美金</p>
    </li>
    <li style="line-height: 45px">
        其他金额
    </li>
</ul>
<div class="recharge_btn"><input type="button" name="" value="确定"></div>
<div class="recharge_main">
    <ul class="confirm_recharge">
        <li>确认充值 <i class="close"></i></li>
        <li class="clearfix">
            <span class="fl">支付金额</span>
            <span class="fr recharge_price"></span>
        </li>
        <li class="clearfix">
            <span class="fl">
                <img src="../img/zfb.png" alt="">
                支付宝支付
            </span>
            <span class="fr"><input type="radio"  name="" value="" checked></span>
        </li>
        <li><input type="submit" name="" value="去支付"></li>
    </ul>
</div>
</form>
</body>
</html>
<script>
$('.recharge li').click(function () {
   $(this).addClass('active').siblings().removeClass('active');
});
$('.recharge_btn').click(function () {
    var val=$('.recharge .active p:nth-child(1)').text();
    var price=val.substring(0,val.length-2);
    $('.recharge_main').show();
    $('.recharge_price').text("￥"+price);
});
$('.close').click(function () {
    $('.recharge_main').hide();
    $('.recharge_price').text('');
});
</script>
